<template>
  <div class="Agent-info-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
        <el-card class='cloud-teller-card'>
        <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top'>
          <el-row :gutter="10">

            <el-col :md="6" :lg="4">
                <el-form-item label='交易码' class='typeInfo-el-form-item' prop='FLOWID'>
                    <el-input v-model='queryForm.FLOWID' placeholder="请输入岗位编号"  ></el-input>
                </el-form-item>
            </el-col> 

            <el-col :md="6" :lg="4">
            <el-form-item label='交易名称' class='typeInfo-el-form-item' prop='FLOWNAME'>
                    <el-input v-model='queryForm.FLOWNAME' placeholder="请输入岗位名称"  ></el-input>
                </el-form-item>
            </el-col> 

            <el-col :md='6' :lg='4'>
              <el-form-item label='交易状态' prop='FLOWSTATUS'>
                <el-select v-model='queryForm.FLOWSTATUS' filterable>
                  <el-option 
                    v-for='item in ST.FLOWSTATUS' 
                    :key='item.value' 
                    :label='item.label' 
                    :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :md='6' :lg='4'>
              <el-form-item label='交易类型' prop='FLOWTYPE'>
                <el-select v-model='queryForm.FLOWTYPE' filterable>
                  <el-option 
                    v-for='item in ST.FLOWTYPE' 
                    :key='item.value' 
                    :label='item.label' 
                    :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :md='6' :lg='4'>
              <el-form-item label='交易业务类型' prop='FLOWSUBTYPE'>
                <el-select v-model='queryForm.FLOWSUBTYPE' filterable>
                  <el-option 
                    v-for='item in ST.FLOWSUBTYPE' 
                    :key='item.value' 
                    :label='item.label' 
                    :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :md="3" :lg="2" class="searchBtnMarginTop" >
                <el-button type='primary' size='mini' icon='el-icon-search' @click="queryPage">查询</el-button>
            </el-col>
            <el-col  :md="3" :lg="2" class="searchBtnMarginTop" >
                <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        </el-card>
        <el-card style="margin-top: 10px">
            <el-col :lg="2" :md="2">
                <el-button type="primary" size="mini" @click="handleClickDialog('add')" icon='el-icon-plus'>新增</el-button>
            </el-col>
            <el-col :lg="2" :md="2">
                <el-button type="primary" size="mini" @click="handleClickDialog('update')" icon='el-icon-edit' :disabled="this.currentRowData.length==1?false:true">修改</el-button>
            </el-col>
            <el-col :lg="2" :md="2">
                <el-button type="danger" size="mini" @click="deleteConfirm" icon='el-icon-delete' :disabled="this.currentRowData.length>=1?false:true">删除</el-button>
            </el-col>
            <el-table ref="tableData" :data='tableDataPage' border min-height="400" width='100%' class="tableMarginTop" header-row-class-name="tableHeaderClass"
                highlight-current-row @selection-change="selectChange">
                <el-table-column type="selection" width="40px"></el-table-column>
                <el-table-column prop='FLOWID' label='交易码'></el-table-column>
                <el-table-column prop='FLOWNAME' label='交易名称'></el-table-column>
                <el-table-column prop='FLOWSTATUS' label='交易状态' :formatter="formatST"></el-table-column>
                <el-table-column prop='FLOWTYPE' label='交易类型' :formatter="formatST"></el-table-column>
                <el-table-column prop='FLOWSUBTYPE' label='交易业务类型' :formatter="formatST"></el-table-column>
                <el-table-column prop='STARTDATE' label='交易生效开始时间' :formatter="formatDate"></el-table-column>
                <el-table-column prop='ENDDATE' label='交易失效开始时间' :formatter="formatDate"></el-table-column>
            </el-table>
            <!-- 翻页按钮 -->
            <el-pagination style="text-align:right;margin-top:20px;" 
                background 
                v-show="this.tableData" 
                :current-page="currentPage" 
                :page-size="pageSize"
                @current-change="changePage" 
                layout="total, prev, pager, next, jumper" 
                :total="total">
            </el-pagination>
            
            <!-- 弹窗 -->
            <keep-alive>
                <component :is='dialogList.addDialog' :option='addOption' @refreshTable="queryPage"></component>
            </keep-alive>
            <keep-alive>
                <component :is='dialogList.updateDialog' :option='updateOption' @refreshTable="queryPage"></component>
            </keep-alive>

        </el-card>
    </div>

  </div>
</template>

<script>
  import getGlobalParams from '@/common/utils/getGlobalParams';
  import toolBox from "@/CTManage/utils/toolBox"
  //通讯相关
  import request from "@/common/utils/requestCT";
  import queryInfo from "@/message/CTManage/flow-tradeinfo-manage/flow-tradeinfo-query";
  import delInfo from "@/message/CTManage/flow-tradeinfo-manage/flow-tradeinfo-del";

  // 弹窗
  import addDialog from "./dialog/add";
  import updateDialog from "./dialog/update"
  
  export default {
    name: "Agent-info-manage",
    components: {
    },
    data() {
      return {
        loading: false,
        pageSize: getGlobalParams.get('PageSize'),
        currentPage: 1,
        total:0,
        currentRowData:'',
        seletedFlowid: [],
        dialogList: {
            addDialog,
            updateDialog
        },
        addOption: {isShow: false},
        updateOption: {isShow: false, FLOWID: '', FLOWNAME: '', FLOWSTATUS: '', FLOWTYPE: '', FLOWSUBTYPE: '', STARTDATE: '', ENDDATE: ''},
        queryForm: {
            FLOWID: '',
            FLOWNAME: '',
            FLOWSTATUS: '',
            FLOWTYPE: '',
            FLOWSUBTYPE: ''
        },
        tableData: [],
        ST: {  // 字段字典
            FLOWSTATUS:[
                {label: '全部',value: ''},
                {label: '启用',value: '0'},
                {label: '停用',value: '1'},
            ],
            FLOWTYPE:[
                {label: '全部',value: ''},
                {label: '公共类',value: '0'},
                {label: '对私类',value: '1'},
                {label: '对公类',value: '2'},
            ],
            FLOWSUBTYPE:[
                {label: '全部',value: ''},
                {label: '账务类',value: '0'},
                {label: '非账务类',value: '1'},
                {label: '信息维护类',value: '2'},
                {label: '信息查询类',value: '3'},
            ]
        }
      };
    },
    mounted() {
        this.queryModel();
    },
    computed: {
      tableDataPage() {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      }
    },
    methods: {
        queryPage() {
            this.currentPage = 1;
            this.queryModel();
        },
        queryModel() {
            this.loading = true; 
            this.currentRowData = '';
            let resBody = new queryInfo();
            resBody.data.FLOWID = this.queryForm.FLOWID;
            resBody.data.FLOWNAME = this.queryForm.FLOWNAME;
            resBody.data.FLOWSTATUS = this.queryForm.FLOWSTATUS;
            resBody.data.FLOWTYPE = this.queryForm.FLOWTYPE;
            resBody.data.FLOWSUBTYPE = this.queryForm.FLOWSUBTYPE;
            resBody.QueryPageNo = this.currentPage;
            resBody.QueryRowNum = this.pageSize;
            request(resBody)
                .then(response=>{
                    if (response.SYS_HEAD.ReturnCode == "000000") {
                        this.tableData = response.RSP_BODY.resultSet;
                        this.total = Number(this.tableData.length);
                    } else {
                        this.$message({
                            type: "error",
                            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                        });
                    }
                    this.loading = false;
                })
                .catch(error=>{
                    this.$message({
                        type: "warning",
                        message: "页面出错！"
                    });
                    this.loading = false;
                    console.error(error)
                })
        },
        // 点击新增修改按钮事件
        handleClickDialog(val) {
            if (val === 'add') {
                this.addOption.isShow = true;
            } else if (val === 'update') {
                this.updateOption.isShow = true;
                this.updateOption.FLOWID = this.currentRowData[0]["FLOWID"];
                this.updateOption.FLOWNAME = this.currentRowData[0]["FLOWNAME"];
                this.updateOption.FLOWSTATUS = this.currentRowData[0]["FLOWSTATUS"];
                this.updateOption.FLOWTYPE = this.currentRowData[0]["FLOWTYPE"];
                this.updateOption.FLOWSUBTYPE = this.currentRowData[0]["FLOWSUBTYPE"];
                this.updateOption.STARTDATE = this.currentRowData[0]["STARTDATE"];
                this.updateOption.ENDDATE = this.currentRowData[0]["ENDDATE"];
            } else {
                console.error("error");
            }
        },
        deleteConfirm() {
            this.$confirm("此操作将永久删除交易码为：" + this.seletedFlowid + " 的信息，是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
                this.delCloudTeller();
            })
            .catch(() => {
                this.$message({
                type: "info",
                message: "已取消删除"
                });
            });
        },
        delCloudTeller() {
            this.loading = true;
            let resBody = new delInfo();
            resBody.data.FLOWID = this.seletedFlowid;
            request(resBody)
                .then(response=>{
                    if (response.SYS_HEAD.ReturnCode == "000000") {
                        this.$message({
                        type: "success",
                        message: "删除成功!"
                        });
                        this.queryPage();
                    } else {
                        this.$message({
                        type: "error",
                        message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                        });
                    }
                    this.loading = false;
                })
                .catch(error=>{
                    this.$message({
                        type: "warning",
                        message: "页面出错!"
                    });
                    this.loading = false;
                    console.error(error);
                })

        },
        selectChange(val) {
            this.currentRowData = val
            this.seletedFlowid = [];
            for (let i in val) {
                this.seletedFlowid[i] = val[i]["FLOWID"];
            }
        },
        formatST(row, col) {
            let ST = this.ST[col.property];
            for (let i in ST) {
                let value = ST[i]["value"];
                if (row[col.property] == value) {
                    return ST[i]["label"];
                }
            }
        },
        formatDate(row, col) {
            let property = col.property;
            let value = row[property+''];
            return toolBox.timeFormat2Date(value);
        },
        changePage(val) {
            this.currentPage = val
        },
        clearForm(item) {
            this.$refs[item+""].resetFields();
            this.queryModel();
        },
    },
  };

</script>


<style lang="scss" scoped>
</style>
